<ul class="nav nav-pills" role="tablist">
	<li role="presentation" class="active"><a href="#!/">Bridge Devices</a></li>
	<li role="presentation"><a href="#!/system">Bridge Control</a></li>
	<li role="presentation"><a href="#!/logs">Logs</a></li>
	<li ng-if="bridge.showVera" role="presentation"><a href="#!/veradevices">Vera Devices</a></li>
	<li ng-if="bridge.showVera" role="presentation"><a href="#!/verascenes">Vera Scenes</a></li>
	<li ng-if="bridge.showFibaro" role="presentation"><a href="#!/fibarodevices">Fibaro Devices</a></li>
	<li ng-if="bridge.showFibaro" role="presentation"><a href="#!/fibaroscenes">Fibaro Scenes</a></li>
	<li ng-if="bridge.showHarmony" role="presentation"><a href="#!/harmonyactivities">Harmony Activities</a></li>
	<li ng-if="bridge.showHarmony" role="presentation"><a href="#!/harmonydevices">Harmony Devices</a></li>
	<li ng-if="bridge.showNest" role="presentation"><a href="#!/nest">Nest</a></li>
	<li ng-if="bridge.showHue" role="presentation"><a href="#!/huedevices">Hue Devices</a></li>
	<li ng-if="bridge.showHal" role="presentation"><a href="#!/haldevices">HAL Devices</a></li>
	<li ng-if="bridge.showMqtt" role="presentation"><a href="#!/mqttmessages">MQTT Messages</a></li>
	<li ng-if="bridge.showHass" role="presentation"><a href="#!/hassdevices">HomeAssistant Devices</a></li>
	<li ng-if="bridge.showDomoticz" role="presentation"><a href="#!/domoticzdevices">Domoticz Devices</a></li>
	<li ng-if="bridge.showSomfy" role="presentation"><a href="#!/somfydevices">Somfy Devices</a></li>
	<li ng-if="bridge.showLifx" role="presentation"><a href="#!/lifxdevices">LIFX Devices</a></li>
	<li ng-if="bridge.showHomeWizard" role="presentation"><a href="#!/homewizarddevices">HomeWizard Devices</a></li>
	<li ng-if="bridge.showOpenHAB" role="presentation"><a href="#!/openhabdevices">OpenHAB Devices</a></li>
	<li ng-if="bridge.showFHEM" role="presentation"><a href="#!/fhemdevices">FHEM Devices</a></li>
	<li ng-if="bridge.showMozIot" role="presentation"><a href="#!/moziotdevices">Mozilla IOT Devices</a></li>
	<li ng-if="bridge.showBroadlink" role="presentation"><a href="#!/broadlinkdevices">Broadlink Devices</a></li>
	<li ng-if="bridge.showHomeGenie" role="presentation"><a href="#!/homegeniedevices">HomeGenie Devices</a></li>
	<li role="presentation"><a href="#!/editdevice">Add/Edit</a></li>
</ul>
<div postrender-action="goToRow()">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h1 class="panel-title">Current devices ({{bridge.devices.length}})</h1>
		</div>
		<div class="panel-body">

			<div class="form-group">
				<button class="btn btn-primary" type="submit" ng-click="renumberDevices()">Renumber Devices</button>
				<button ng-if="bridge.securityInfo.useLinkButton" class="btn btn-primary" type="submit"
					ng-click="pushLinkButton()">Link</button>
				<button class="btn btn-primary" type="submit" ng-click="manageLinksButton()">Manage Links</button>
				<label for="device-ip-filter">Show devices visible to: </label>
				<input type="text" id="device-ip-filter" style="width:150px"
					ng-model="bridge.state.filterDevicesByIpAddress" placeholder="">
				<input type="checkbox" id="device-ip-filter-mode" ng-model="bridge.state.filterDevicesOnlyFiltered"
					ng-true-value=true ng-false-value=false style="margin-right: 3px">Must contain filter
				<label for="device-type-filter" style="margin-left:50px">Filter device type: </label>
				<select name="device-type" id="device-type-filter" ng-model="bridge.state.filterDeviceType">
					<option value="">---No Filter---</option>
					<!-- not selected / blank option -->
					<option value="custom">Custom</option>
					<option value="UDP">UDP</option>
					<option value="TCP">TCP</option>
					<option value="exec">Execute Script/Program</option>
					<option value="switch">Switch</option>
					<option value="scene">Scene</option>
					<option value="macro">Macro</option>
					<option value="group">Group</option>
					<option value="activity">Activity</option>
					<option value="button">Button</option>
					<option value="thermo">Thermo</option>
					<option value="passthru">Pass Thru</option>
					<option value="home">Home</option>
				</select>
			</div>

			<scrollable-table watch="bridge.devices">
				<table class="table table-bordered table-striped table-hover">
					<thead>
						<tr>
							<th sortable-header col="id" comparator-fn="comparatorUniqueId">ID</th>
							<th sortable-header col="name">Name</th>
							<th sortable-header col="description">Description</th>
							<th sortable-header col="deviceType">Type</th>
							<th sortable-header col="targetDevice">Target</th>
							<th sortable-header col="startupAction">Startup Action</th>
							<th sortable-header col="inactive">Inactive</th>
							<th sortable-header col="noState">No State</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tr ng-repeat="device in bridge.devices | filterDevicesByRequester:bridge.state.filterDevicesByIpAddress:bridge.state.filterDevicesOnlyFiltered:bridge.state.filterDeviceType"
						row-id="{{device.id}}" ng-class="{info: bridge.viewDevId == device.id}">
						<td title="Locked: {{device.lockDeviceId}} - Click to Toggle" ng-click="toggleLock(device)">
							<b ng-if="device.lockDeviceId">{{device.id}}</b>
							<p ng-if="!device.lockDeviceId">{{device.id}}</p>
						</td>
						<td
							title="on={{device.deviceState.on}},bri={{device.deviceState.bri}},hue={{device.deviceState.hue}},sat={{device.deviceState.sat}},effect={{device.deviceState.effect}},ct={{device.deviceState.ct}},alert={{device.deviceState.alert}},colormode={{device.deviceState.colormode}},reachable={{device.deviceState.reachable}},XYList={{device.deviceState.xy}}">
							{{device.name}}</td>
						<td class="cr">{{device.description}}</td>
						<td>{{device.deviceType}}</td>
						<td>{{device.targetDevice}}</td>
						<td class="cr" title="Click to set actions for device on ha-bridge startup." ng-click="setStartupAction(device)">{{device.startupActions}}</td>
						<td>{{device.inactive}}</td>
						<td>{{device.noState}}</td>
						<td>
							<p>
								<button class="btn btn-info" type="submit" ng-click="testUrl(device, 'on')">Test
									ON</button>
								<button class="btn btn-info" type="submit" ng-click="testUrl(device, 'dim')">Test
									Dim</button>
								<button class="btn btn-info" type="submit" ng-click="testUrl(device, 'off')">Test
									OFF</button>
								<button class="btn btn-info" type="submit" ng-click="testUrl(device, 'color')">Test
									Color</button>
								<button class="btn btn-warning" type="submit"
									ng-click="editDevice(device)">Edit/Copy</button>
								<button class="btn btn-danger" type="submit"
									ng-click="deleteDevice(device)">Delete</button>
							</p>
						</td>
					</tr>
				</table>
			</scrollable-table>
		</div>
	</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<h1 class="panel-title">
			Bridge Device DB Backup <a ng-click="toggleBk()"><span class={{imgBkUrl}} aria-hidden="true"></span></a>
		</h1>
	</div>
	<div ng-if="visibleBk" class="panel-body">
		<p>Control your backups from this area. Use the default name by hitting backup or specify your own.</p>
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-xs-12 col-sm-2 control-label" for="backup-name">Backup
					File Name</label>

				<div class="col-xs-8 col-sm-7">
					<input id="backup-name" class="form-control" type="text" ng-model="optionalbackupname"
						placeholder="Optional">
				</div>
				<button type="submit" class="btn btn-primary" ng-click="backupDeviceDb(optionalbackupname)">Backup
					Device DB</button>
			</div>
		</form>
		<form class="form-horizontal" name="myForm">
			<div class="form-group">
				<label class="col-xs-12 col-sm-2 control-label" for="backup-name">Device DB to upload</label>
				<div class="col-xs-8 col-sm-7">
					<input type="file" ngf-select="" ng-model="deviceFile" name="file">
				</div>

				<button ng-disabled="!myForm.$valid" type="submit" class="btn btn-primary"
					ng-click="uploadDeviceFile(deviceFile.name, deviceFile)">Upload</button>
				<span class="progress" ng-show="deviceFile.progress >= 0">
					<div style="width:{{deviceFile.progress}}%" ng-bind="deviceFile.progress + '%'" class="ng-binding">
					</div>
				</span>
				<span ng-show="deviceFile.result">Upload Successful</span>
			</div>
		</form>
		<table class="table table-bordered table-striped table-hover">
			<thead>
				<tr>
					<th>Filename</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tr ng-repeat="backup in bridge.backups">
				<td><a class="btn" ng-click="downloadBackup(backup)" ng-href="{{ url }}">{{backup}}</a></td>
				<td>
					<button class="btn btn-danger" type="submit" ng-click="restoreBackup(backup)">Restore</button>
					<button class="btn btn-warning" type="submit" ng-click="deleteBackup(backup)">Delete</button>
				</td>
			</tr>
		</table>
	</div>
</div>

<script type="text/ng-template" id="valueDialog">
	<div class="ngdialog-message">
			<h2>Select value</h2>
				<p>
					    <input type="radio" ng-model="valueType" value="percentage" ng-change="changeScale()"> Percentage
					    <input type="radio" ng-model="valueType" value="raw" ng-change="changeScale()"> Raw
				</p>
				<p>
					<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>
				</p>
		</div>
		<div class="ngdialog-buttons mt">
			<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="setValue()">Set</button>
		</div>
	</script>
<script type="text/ng-template" id="colorDialog">
	<div class="ngdialog-message">
			<h2>Select Color</h2>
				<p>
					<input colorpicker="rgb" ng-model="rgbPicker.color" type="text">
				</p>
		</div>
		<div class="ngdialog-buttons mt">
			<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="setValue()">Set</button>
		</div>
	</script>
<script type="text/ng-template" id="deleteDialog">
	<div class="ngdialog-message">
			<h2>Device to Delete?</h2>
				<p>{{device.name}}</p>
				<p>Are you Sure?</p>
		</div>
		<div class="ngdialog-buttons mt">
			<button type="button" class="ngdialog-button ngdialog-button-error" ng-click="deleteDevice(device)">Delete</button>
		</div>
	</script>
<script type="text/ng-template" id="startupActionDialog">
	<div class="ngdialog-message">
				<h2>Select Actions for startup on {{device.name}}</h2>
				<table class="table table-bordered table-striped table-hover">
					<thead>
						<tr>
							<th>Setting</th>
							<th>Value</th>
						</tr>
					</thead>
					<tr>
						<td>State</td>
						<td>
							<select name="the-state" id="the-state"	ng-model="theState">
								<option value="">---None---</option>
								<!-- not selected / blank option -->
								<option value="On">On</option>
								<option value="Off">Off</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>Dim</td>
						<td>
								<input type="checkbox"
								ng-model="setDim" ng-true-value=true
								ng-false-value=false>
								<rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>
						</td>
					</tr>
					<tr>
						<td>Color RGB</td>
						<td><input colorpicker="rgb" ng-model="rgbPicker.color" type="text"></td>
					</tr>
				</table>
			</div>
			<div class="ngdialog-buttons mt">
				<button type="button" class="ngdialog-button ngdialog-button-error" ng-click="startupActionSave(device)">Save</button>
			</div>
		</script>